{% extends "title_base.html" %}

{% block title %}
{% load static %}
<link type="image/x-icon" rel="shortcut icon" href="{% static 'favicon.ico' %}">
<link type="text/css" rel="stylesheet" href="{% static 'css/common.css' %}">
<link type="text/css" rel="stylesheet" href="{% static 'css/index.css' %}">
{% endblock %}

{% block content %}
<body class="index">
    <!-- 内嵌 CSS -->
    <style>
        /* 设置背景视频或图像 */
        .background-image {
            position: fixed; /* 让背景固定在页面 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /*background-image: url("https://haowallpaper.com/link/common/file/previewFileImg/15812051945034048"); !* 设置背景图像 *!*/
            background-image: url("https://haowallpaper.com/link/common/file/previewFileImg/15556743616106816"); /* 设置背景图像 */
            background-size: cover; /* 背景图像覆盖整个页面 */
            background-position: center; /* 背景图像居中 */
            background-attachment: fixed; /* 背景固定，滚动时不动 */
            z-index: -1; /* 确保背景图在页面内容的下方 */
        }
        /* 页面内容区域 */
        .index {
            position: relative;
            z-index: 1; /* 保证页面内容在背景之上 */
        }
    </style>

    <!-- 背景图 -->
    <div class="background-image"></div>

    <!-- 页头 -->
<div class="header">
    <a href="/" class="logo" title="首页">
        <img alt="我的音乐" src="{% static 'image/logo.png' %}">
    </a>
    <div class="search-box">
        <form id="searchForm" action="{% url 'search' 1 %}" method="post" target="_blank">
            {% csrf_token %}
            <div class="search-keyword">
                <input name="kword" type="text" class="keyword" maxlength="120" placeholder="音乐节" style="color: white;" />
            </div>
            <input id="subSerch" type="submit" class="search-button" value="搜 索" style="color: white;" />
        </form>
        <div id="suggest" class="search-suggest" style="color: white;"></div>
        <div class="search-hot-words">
            {% for song in search_song %}
                <a target="play" href="{% url 'play' song.song.song_id %}" style="color: white;">{{ song.song.song_name }}</a>
            {% endfor %}
        </div>
    </div>
</div>


    <!-- 导航栏 -->
<div class="nav-box">
    <div class="nav-box-inner">
        <ul class="nav clearfix">
            <li><a href="/" style="color: white;">首页</a></li>
            <li><a href="{% url 'ranking' %}" target="_blank" style="color: white;">歌曲排行</a></li>
            <li><a href="{% url 'home' 1 %}" target="_blank" style="color: white;">用户中心</a></li>
        </ul>
        <div class="category-nav">
            <div class="category-nav-header">
                <strong><a href="javascript:;" title="" style="color: white;">音乐分类</a></strong>
            </div>
            <div class="category-nav-body">
                <div id="J_CategoryItems" class="category-items">
                    {% for label in label_list %}
                        <div class="item" data-index="1">
                            <h3><a href="javascript:;" style="color: white;">{{ label.label_name }}</a></h3>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>


        <!-- 页面主体内容 -->
        <div class="wrapper clearfix">
            <div class="main">
                <div id="J_FocusSlider" class="focus">
                    <div id="bannerLeftBtn" class="banner_btn"></div>
                    <ul class="focus-list f_w">
                        <li class="f_s">
                            <a target="play" href="{% url 'play' 12 %}" class="layz_load">
                                <img data-src="{% static 'image/datu-1.jpg' %}" width="750" height="275">
                            </a>
                        </li>
                        <li class="f_s">
                            <a target="play" href="{% url 'play' 13 %}" class="layz_load">
                                <img data-src="{% static '/image/datu-2.jpg' %}" width="750" height="275">
                            </a>
                        </li>
                    </ul>
                    <div id="bannerRightBtn" class="banner_btn"></div>
                </div>
            </div>

            <div class="aside">
                <h2>热门歌曲</h2>
               <ul class="song-list">
                   {% for song in play_hot_song %}
                   <li><span>{{ forloop.counter }}</span>
                       <a target="play" href="{% url 'play' song.song.song_id %}" style="color: white;">{{ song.song.song_name }}</a>
                   </li>
                   {% endfor %}
                   <li class="computer"><span style="background-color: #30C37C;">4</span>
                       <a href="http://127.0.0.1:8000/ranking/?type=%E6%B5%81%E8%A1%8C" class="main-title" style="color: white;">圣诞快乐</a>
                   </li>
                   <li class="computer"><span style="background-color: #30C37C;">5</span>
                       <a href="http://127.0.0.1:8000/ranking/?type=%E6%B5%81%E8%A1%8C" class="main-title" style="color: white;">搁浅</a>
                   </li>
                   <li class="computer"><span style="background-color: #30C37C;">6</span>
                       <a href="http://127.0.0.1:8000/ranking/?type=%E6%B5%81%E8%A1%8C" class="main-title" style="color: white;">你就不要想起我</a>
                   </li>
                   <li class="computer"><span style="background-color: #30C37C;">7</span>
                       <a href="http://127.0.0.1:8000/ranking/?type=%E6%B5%81%E8%A1%8C" class="main-title" style="color: white;">做我老婆好不好</a>
                   </li>
                   <li class="computer"><span style="background-color: #30C37C;">8</span>
                       <a href="http://127.0.0.1:8000/ranking/?type=%E6%B5%81%E8%A1%8C" class="main-title" style="color: white;">樱花树下的约定</a>
                   </li>
                   <li class="computer"><span style="background-color: #30C37C;">9</span>
                       <a href="http://127.0.0.1:8000/ranking/?type=%E6%B5%81%E8%A1%8C" class="main-title" style="color: white;">写给黄淮</a>
                   </li>
                   <li class="computer"><span style="background-color: #30C37C;">10</span>
                       <a href="http://127.0.0.1:8000/ranking/?type=%E6%B5%81%E8%A1%8C" class="main-title" style="color: white;">圣诞快乐</a>
                   </li>
               </ul>

            </div>
        </div>

        <!-- 今日推荐 -->
<div class="today clearfix">
    <div class="today-header">
        <i></i>
        <h2><a href="http://127.0.0.1:5502/1/test/index.html" target="_blank" style="color: white;">新歌推荐</a></h2>
    </div>

    <div class="today-list-box slide">
        <div id="J_TodayRec" class="today-list">
            <ul>
                {% for list in daily_recommendation %}
                    <li class="{% if forloop.first %}first{% endif %}">
                        <a class="pic layz_load pic_po" target="play" href="{% url 'play' list.song_id %}" >
                            <img data-src="{% static 'songImg/' %}{{ list.song_img }}" />
                        </a>
                        <div class="name" style="color: white;">
                            <h3><a target="play" href="{% url 'play' list.song_id %}" style="color: white;">{{ list.song_name }}</a></h3>
                            <div class="singer" style="color: white;"><span style="color: white;">{{ list.song_singer }}</span></div>
                            <div class="times" style="color: white;">发行时间：<span style="color: white;">{{ list.song_release }}</span></div>
                        </div>
                        <a target="play" href="{% url 'play' list.song_id %}" class="today-buy-button" style="color: white;">去听听></a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>

<!-- 热门搜索与下载 -->
<div class="section">
    <ul id="J_Tab" class="tab-trigger">
        <li data-cur="0" class="current t_c" style="color: white;">热门搜索</li>
        <li data-cur="1" class="t_c" style="color: white;">热门下载</li>
    </ul>
    <div class="tab-container">
        <div id="J_Tab_Con" class="tab-container-cell">
            {% for list in all_ranking %}
                <ul class="product-list clearfix t_s {% if forloop.first %}current{% endif %}">
                    {% for songs in list %}
                    <li>
                        <a target="play" href="{% url 'play' songs.song.song_id %}" class="pic layz_load pic_po">
                            <img data-src="{% static 'songImg/' %}{{ songs.song.song_img }}" />
                        </a>
                        <h3><a target="play" href="{% url 'play' songs.song.song_id %}" style="color: white;">{{ songs.song.song_name }}</a></h3>
                        <div class="singer" style="color: white;"><span style="color: white;">{{ songs.song.song_singer }}</span></div>
                        <div class="times" style="color: white;">
                            {% if all_ranking|first == list %}
                            搜索次数：<span>{{ songs.dynamic_search }}</span>
                            {% else %}
                            下载次数：<span>{{ songs.dynamic_down }}</span>
                            {% endif %}
                        </div>
                    </li>
                    {% endfor %}
                </ul>
            {% endfor %}
        </div>
    </div>
</div>


    <!-- JavaScript -->
    <script data-main="{% static 'js/index.js' %}" src="{% static 'js/require.js' %}"></script>
</body>
{% endblock %}
